//1.混合方法
.boxStyle() {//加括号css不显示和类名区分
  background: yellow;
  box-shadow: 0 1px 2px #ccc;
  border: 1px solid #eee;
}
#wrap { .boxStyle(); } // 一键继承所有样式
//2.默认参数方法
.border(@a:10px,@b:50px,@c:20px,@color:#213254){
    border: solid 1px @color;
    box-shadow: @arguments;//全部参数
}
#wrap2{
    .border();
}
//3.方法的匹配模式
.triangle(top,@width:20px,@color:#000){
border-color:transparent transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
border-color: transparent @color transparent transparent ;
}

.triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){//@_去和上面变量匹配
border-style: solid;
border-width: @width;
}
#main{//可替换对应位置
.triangle(left, 50px, #999);
}
//4.方法的命名空间
.card(){
  background-color: #000;
  .p(){
    color: #000;
  }
}
div{
  .card()
}
div{
  //父元素不用加括号
  .card .p()
}
//5.方法的条件筛选
#card {
  //when
  .border(@width,@color,@style) when(@width>100px) and(@color=#999){
    border: @style @color @width;
  }
}
#card {
  //when not
  .backgroud(@color) when not (@color >= #111111){//非数值类型的只能用“=”来判断，包括颜色，如果用其他的判断都返回false
    background-color: #000000;
  }
  //,分隔符的方法相当于或
  .font(@size:20px) when (@size>150px),(@size<100px){
    font-size: @size;
  }
}
#main {
    #card>.border(200px,#999,solid);
    #card>.backgroud(#111111);
    #card>.font(50px)
}
//6.数量不定的参数
.boxShadow( ... ){
  box-shadow: arguments;
}
.textShadow(@a, ... ){
  text-shadow: @arguments;
}
#main{
  .boxShadow(1px,4px,30px,red);
  .textShadow(1px,4px,30px,red);
}
//7.方法使用important!
.border2{
    border: 1px solid red;
    margin: 50px;
}
#main {
    .border2() !important
}
//8.循环方法
//generate生成
// 1. 循环调用：触发循环，传入总列数 @n=4（没有传@i，会用默认值1）
.generate-column(4);
// 2. 循环混合定义// 循环继续的条件
.generate-column(@n,@i:1) when(@i<=@n){
     // 3. 生成目标样式：用变量插值生成类名和属性值
     // @{i}：变量插值，把@i的值嵌入类名（比如@i=1→.column-1）
    .column-@{i}{
        width: (@i*100%/@n);
    }
    //4. 递归调用，调用自己
    .generate-column(@n, (@i+1))
}
//9.属性拼接方法
//+属性拼接
.boxShadow2(){
    //inset外阴影转化为内阴影
    box-shadow+: inset 0 0 10px #555;
}
#main{
    .boxShadow2();
    box-shadow+: 0 0 20px black;
}
//+_
.Animation(){
    transform+_: scale(2);
}
.main{
    .Animation();
    transform+_: rotate(15deg);
}
//10.实战技巧